<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0 auto;
            list-style: none;
        }

        body {
            background-color: pink;

        }

        input,
        button {
            display: block;
            margin: 10px 50px;
            outline: none;

        }

        .name,
        .none {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 10%;
            left: 50%;
            transform: translate(-50%, 50%);
            border: 1px solid black;
            background-color: white;
            display: none;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
        }
        .tab{
            border: 1px solid black;
            width:800px ;
            table-layout:automatic;
            border-collapse:1;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="text" placeholder="姓名查询" id="one">
        <input type="text" placeholder="性别查询" id="two">
        <input type="text" placeholder="分组查询" id="three">

    </div>
    <div class="none"></div>
    <div class="name"></div>

    <table class="tab" border="1px">

    </table>
    <script>
        var data = [{
            name: "郭鹏杰",
            age: 20,
            sex: "男",
            phone: 15537580947,
            dis: "打豆豆",
            fenzu: "第一组"
        }, {
            name: "杨璐瑶",
            age: 20,
            sex: '女',
            phone: 15978844693,
            dis: '吃饭',
            fenzu: '第一组'
        }, {
            name: '李存财',
            age: 19,
            sex: '男',
            phone: 13193560276,
            dis: '爱好打游戏',
            fenzu: '第一组'
        }, {
            name: '顾乐',
            age: 21,
            sex: '男',
            phone: 17395882286,
            dis: '葡萄',
            fenzu: '第一组'
        }, {
            name: "靳开创",
            age: 18,
            sex: "男",
            phone: 13183116955,
            dis: "描述",
            fenzu: "第一组",
        }, {
            name: '刘奇',
            age: 21,
            sex: '男',
            phone: 13461750025,
            dis: '爱好游戏',
            fenzu: '第一组',
        }, {
            name: "张艺",
            age: 19,
            sex: "男",
            phone: 13271711173,
            dis: "Hello World",
            fenzu: "第二组",
        }, {
            name: "曾娜娜",
            age: 98,
            sex: "女",
            phone: 18605087224,
            dis: "芝士美女",
            fenzu: "第二组",
        }, {
            name: "付潇然",
            age: 249,
            phone: 18538112416,
            sex: "女",
            dis: "放风",
            fenzu: "第二组",
        }, {
            name: "余庭伟",
            age: 22,
            sex: "男",
            phone: 13903971541,
            dis: "一男的",
            fenzu: "第二组",
        }, {
            name: "李国政",
            age: 18,
            sex: "男",
            phone: 13253053446,
            dis: "你好!世界",
            fenzu: "第二组",
        }, {
            name: '李江涛',
            age: 21,
            sex: '男',
            phone: 1342341345,
            dis: '描述',
            fenzu: '第三组',
        }, {
            name: '王彬',
            age: 22,
            sex: "女",
            phone: 18237839054,
            dis: '打游戏',
            fenzu: '第三组',
        }, {
            name: "张少鹏",
            age: 18,
            sex: "男",
            phone: 15138168315,
            dis: "看小说",
            fenzu: "第三组",
        }, {
            name: "ikun",
            age: 18,
            sex: "男",
            phone: 110,
            dis: "唱，跳，rap，篮球",
            fenzu: "第三组",
        }, {
            name: '邢首都',
            age: 21,
            sex: '男',
            phone: 1986539555,
            dis: '你猜',
            fenzu: '第三组'
        }, {
            name: '李陈',
            age: 23,
            sex: '男',
            phone: 17633723284,
            dis: '潜水',
            fenzu: '第三组',
        }, {
            name: '张赫',
            age: '18',
            sex: '男',
            phone: 15037090481,
            dis: '看宝宝巴士',
            fenzu: '第三组'
        }, {
            name: "李孟焱",
            age: 22,
            sex: "男",
            phone: 17530118820,
            dis: "学习、游戏",
            fenzu: "第三组",
        }, {
            name: '柳怀',
            age: 18,
            sex: '男',
            phone: 17534743578,
            dis: '唱跳,rap,篮球',
            fenzu: '第三组'
        }, {
            name: "张亚阳",
            age: 15,
            sex: "男",
            phone: 17837222136,
            dis: "搞笑男",
            fenzu: "第四组",
        }, {
            name: "张尚坤",
            age: 16,
            sex: "男",
            phone: 18538210158,
            dis: '搞笑男',
            fenzu: "第四组",
        }, {
            name: "苏丽敏",
            age: 18,
            sex: "女",
            phone: 18803600782,
            dis: '搞笑女',
            fenzu: "第四组",
        }, {
            name: '翟海迪',
            age: 22,
            sex: '女',
            phone: 17550517528,
            dis: '搞笑女',
            fenzu: '第四组'
        }, {
            name: '高鹏飞',
            age: 20,
            sex: '男',
            phone: 17633824126,
            dis: '搞笑男',
            fenzu: '第四组'
        }, {
            name: '张旭',
            age: 23,
            sex: '男',
            phone: 15518493219,
            dis: '佛系男',
            fenzu: '第四组'
        }, {
            name: '杨嘉楠',
            age: 22,
            sex: '男',
            phone: 13663949149,
            dis: '搞笑男',
            fenzu: '第四组',
        }, {
            name: '汤阳阳',
            age: '18',
            sex: '男',
            phone: '15537375861',
            dis: '唱跳rap打篮球',
            fenzu: '第五组',
        }, {
            name: '付建朋',
            age: '18',
            sex: '男',
            phone: '16537375861',
            dis: '唱跳rap打篮球',
            fenzu: '第五组',
        }, {
            name: '位恩喜',
            age: '18',
            sex: '男',
            phone: '18538375861',
            dis: '唱跳rap打篮球',
            fenzu: '第五组',
        }, {
            name: '李建涛',
            age: '18',
            sex: '男',
            phone: '15557375861',
            dis: '唱跳rap打篮球',
            fenzu: '第五组',
        }, {
            name: '张少龙',
            age: '18',
            sex: '男',
            phone: '17538375861',
            dis: '唱跳rap打篮球',
            fenzu: '第五组',
        }, {
            name: '曲永沛',
            age: '18',
            sex: '男',
            phone: '18537375861',
            dis: '唱跳rap打篮球',
            fenzu: '第五组',
        }, {
            name: '谢遵杰',
            age: '18',
            sex: '男',
            phone: '16537875861',
            dis: '唱跳rap打篮球',
            fenzu: '第五组',
        }, {
            name: '廖治行',
            age: '18',
            sex: '男',
            phone: '13537975861',
            dis: '唱跳rap打篮球',
            fenzu: '第五组',
        }, {
            name: '刘文奇',
            age: 24,
            sex: '男',
            phone: 13949125089,
            dis: '唱跳rap篮球',
            fenzu: '第六组',
        }, {
            name: "刘奕赛",
            age: 20,
            sex: "男",
            phone: 17630586042,
            dis: "敲代码",
            fenzu: "第六组"
        }, {
            name: "李楠",
            age: 21,
            sex: "男",
            phone: 17638900426,
            dis: "唱,跳,rap,篮球",
            fenzu: "第六组",
        }, {
            name: "牛意博",
            age: 18,
            sex: "男",
            phone: 17539585630,
            dis: "球",
            fenzu: "第六组",
        }, {
            name: "张自宽",
            age: 21,
            sex: "男",
            phone: 17740229824,
            dis: "码农",
            fenzu: "第六组",
        }, {
            name: "张晓羽",
            age: 16,
            sex: "女",
            phone: 19836536157,
            dis: "无敌青春美少女",
            fenzu: "第六组"
        }, {
            name: "李根源",
            age: 20,
            sex: "男",
            phone: 15239999437,
            dis: "刀不锋利马太瘦，你拿什么跟我斗",
            fenzu: "第六组",
        }, {
            name: "尹裕钧",
            age: 22,
            sex: "男",
            phone: 15738111631,
            dis: "人生得意须尽欢，莫使金樽空对月",
            fenzu: "第六组",
        }, {
            name: "唐俊毫",
            age: 19,
            sex: "男",
            phone: 13223921165,
            dis: "秋风萧瑟，洪波涌起",
            fenzu: "第六组"
        }]
        // console.log(data.length)
        var box = document.querySelector('.box');
        // var box = document.querySelector('.box');
        var str = '';
        str += `<caption>210学生表</caption>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>手机号</th>
                <th>介绍</th>
                <th>分组</th>
            </tr>`
        for (let i = 0; i < data.length; i++) {
            str += `
        <tr>
            <td>${data[i].name}</td><td>${data[i].age}</td>
            <td>${data[i].sex}</td><td>${data[i].phone}</td>
            <td>${data[i].dis}</td><td>${data[i].fenzu}</td>
        </tr>`
        }
        var tab = document.querySelector('table.tab');
        tab.innerHTML = str;

        var input1 = document.querySelector('#one');
        var input2 = document.querySelector('#two');
         var input3 = document.querySelector('#three');
        var name1 = document.querySelector('.name');
        var none = document.querySelector('.none');

        // 姓名查询，输入姓名查询出符合条件的信息
        input1.addEventListener('change', function () {
            for (let i = 0; i < data.length; i++) {
                if (this.value == data[i].name) {
                    // console.log(i);获得输入框的内容
                    name1.style.display = 'block';
                    name1.innerHTML += '姓名：' + data[i].name;
                    name1.innerHTML += '<br>';
                    name1.innerHTML +=  '年龄：' + data[i].age;
                    name1.innerHTML += '<br>';
                    name1.innerHTML +=  '性别：' + data[i].sex;
                    name1.innerHTML += '<br>';
                    name1.innerHTML +=  '电话：' + data[i].phone;
                    name1.innerHTML += '<br>';
                    name1.innerHTML +=  '介绍：' + data[i].dis;
                    name1.innerHTML += '<br>';
                    name1.innerHTML +=  '分组：' + data[i].fenzu;

                    // 当输入框的内容为空时，清空显示框内容
                } else if (this.value == '') {
                    name1.innerHTML = '';
                    none.innerHTML = '';
                    name1.style.display = 'none';
                    none.style.display = 'none';

                    // 找不到符合条件的姓名时显示框进行提示
                } else {
                    none.style.display = 'block';
                    none.innerHTML = '你输入的信息有误，请重新查询';
                }
            }
        })

        // 性别查询，输入性别查询出符合条件的学生姓名
        input2.addEventListener('input', function () {
            for (let i = 0; i < data.length; i++) {
                if (this.value == data[i].sex) {
                    name1.style.display = 'block';
                    name1.innerHTML += data[i].name;
                    name1.innerHTML+='&nbsp&nbsp&nbsp'

                } else if (this.value == '') {
                    name1.innerHTML = '';
                    none.innerHTML = '';
                    name1.style.display = 'none';
                    none.style.display = 'none';
                }
            }
        })

        // 分组查询，输入组名查询出符合条件的学生
        input3.addEventListener('input', function () {
            for (let i = 0; i < data.length; i++) {
                if (this.value == data[i].fenzu) {
                    name1.style.display = 'block';
                    name1.innerHTML += data[i].name;
                    name1.innerHTML+='&nbsp&nbsp&nbsp'

                } else if (this.value == '') {
                    name1.innerHTML = '';
                    none.innerHTML = '';
                    name1.style.display = 'none';
                    none.style.display = 'none';
                } 
            }
        })
    </script>
</body>

</html>